<template>
  <div class="CarouselSetting">
    <div class="ele-title">
      <h3>轮播图</h3>
      <p class="ele-little-title">轮播图图片建议尺寸750x350像素</p>
    </div>
    <div class="content">
      <div v-for="(item,index) in list" :key="index" class="space">
        <CarouSelCard ref="carousel" :card-form="item" :index="index" />
        <el-button type="danger" class="el-icon-close delete" circle @click="list.splice(index,1)" />
      </div>
      <el-card>
        <el-col :span="24" style="text-align: center;line-height: 50px;height: 50px;margin-top: -20px"><el-button type="text" class="addBtn" @click="addList">添加轮播图</el-button></el-col>
      </el-card>
    </div>

  </div>
</template>

<script>
/** 商品 tabs */
import CarouSelCard from '@/views/shop/component/CarouSelCard'
import { addCarousel, getCarousel } from '@/api/customAPI/shop/homeSetting'
import { getCityList } from '@/api/auth'
export default {
  name: 'CarouselSetting',
  components: {
    CarouSelCard
  },

  data() {
    return {
      model: null,
      list: [],
      allProvince: []
    }
  },
  watch: {
    allProvince: {
      handler(newValue, oldValue) {
        if (this.allProvince.length > 0) {
          this.$nextTick(() => [
            this.$refs.carousel.forEach(item => {
              item.setAllProvince(this.allProvince)
            })
          ])
        }
      }
    }
  },
  created() {
    this.list.push({
      id: null,
      name: null,
      link: null,
      url: null,
      cityType: '0',
      citys: []
    })
  },
  methods: {
    setModel(model) {
      this.model = parseInt(model)
      getCarousel().then(res => {
        if (res.data.data) {
          const list = res.data.data
          list.forEach((item, index) => {
            if (!item.event) {
              item.event = 'none'
            }
            if (list[index].cityType) {
              item.cityType = list[index].cityType.toString()
            }

            /* if (item.cityType == '1' && item.citys.length > 0) {
              this.$nextTick(() => {
                this.$refs.carousel.forEach(inf =>{
                  console.log(inf)
                  if (inf.id == item.id) {
                    inf.setAddedList(item.citys)
                  }
                })

              })
            }*/
          })
          this.list = list
        }
      })
      getCityList().then(response => {
        this.allProvince = response.data.data
      })
    },
    addList() {
      this.list.push({
        id: null,
        name: null,
        event: 'none',
        link: null,
        url: null,
        cityType: '0',
        citys: []
      })
      this.$nextTick(() => [
        this.$refs.carousel.forEach(item => {
          item.setAllProvince(this.allProvince)
        })
      ])
    },
    submitCarousel() {
      const data = []
      if (this.$refs.carousel && this.$refs.carousel.length > 0) {
        this.$refs.carousel.forEach(item => {
          if (item.getData()) {
            data.push(item.getData())
          }
        })
        if (data.length > 0) {
          addCarousel({ list: data }).then(res => {
            this.$message.success('添加轮播图成功')
          })
        }
      } else {
        return this.$message.error('请添加轮播图')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.CarouselSetting {
  .space {
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 10px;
    .delete {
      position: absolute;
      right: 0;
      top: 0;
    }
    .addBtn {
      display: block;
      width: 100%;
    }
  }
}
</style>
